<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>客户信息</title>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/css/money.css" />
		<link rel="stylesheet" href="${BASE_PATH}/static/css/zoomify.min.css">
	</head>

	<style type="text/css">
		.layui-table-view {
			margin: 0px 10px 10px 10px;
		}
		
		.layui-input-block input {
			color: #000000;
		}
		
		.layui-upload-img {
			width: 92px;
			height: 92px;
			margin: 0 10px 10px 0;
		}
		
		.layui-elem-quote {
			margin-bottom: 0px;
		}
	</style>

	<body>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			<legend>确认还款</legend>
		</fieldset>
		<div class="box">
			<div class="arry">
				<ul>
				[#list list as b]
				<li class="p ${b.p}">
					<div style="width: 350px;height: 549px;background: #FFFFFF;position: relative;">
						<form class="layui-form layui-form-pane">
						<input value="${b.loanBasicId}" name="loanBasicId" type="hidden"/>
						<input value="${b.loanId}" name="loanId" type="hidden"/>
							<blockquote class="layui-elem-quote layui-quote-nm">
								<div class="layui-form-item">
									<div class="layui-inline" style="margin-bottom: 0;">
										<label class="layui-form-label">还款时间</label>
										<div class="layui-input-inline">
											<input type="text" class="layui-input" id="test19" value="${b.stillTime?date}" disabled style="width: 226px;">
										</div>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">还款金额</label>
									<div class="layui-input-block">
										<input id="m" type="text" name="title" autocomplete="off" value="${b.stillMoney}/元" class="layui-input" disabled>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">逾期天数</label>
									<div class="layui-input-inline" style="width: 50px;">
										[#if b.sumbitState == 1]
										<input id="day" type="number" value="0" name="overDay" lay-verify="name" placeholder="/天" autocomplete="off" class="layui-input"> [/#if] [#if b.sumbitState != 1]
										<input type="number" name="text" lay-verify="name" placeholder="/天" autocomplete="off" class="layui-input" disabled> [/#if]
									</div>
									<label class="layui-form-label">逾期金额</label>
									<div class="layui-input-inline" style="width: 50px;">
										<input id="dayMoney" type="text" name="overMoney" value="0" lay-verify="userName" placeholder="" autocomplete="off" class="layui-input" disabled>
									</div>
								</div>
							</blockquote>
							[#if b.sumbitState == 1]
							<blockquote class="layui-elem-quote layui-quote-nm">
								<input calss="file" name="photo" value="" id="file" type="hidden" />
								<input calss="file1" name="photo1" value="" id="file1" type="hidden" />
								<input calss="file2" name="photo2" value="" id="file2" type="hidden" />
								<div class="layui-upload" style="height: 130px;margin-top: 20px;">
									<a type="button" class="layui-btn" id="test2">凭证上传</a>
									<div class="layui-upload-list demo2" id="demo2"></div>
								</div>
							</blockquote>

							<blockquote class="layui-elem-quote layui-quote-nm">
								<div class="layui-form-item">
									<label class="layui-form-label">应交金额</label>
									<div class="layui-input-block">
										<input id="money" type="text" value="${b.stillMoney}" name="shouldMoney" autocomplete="off" value="" class="layui-input" disabled>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">实交金额</label>
									<div class="layui-input-block">
										<input type="text" name="acyualMoney" lay-verify="userName" placeholder="" autocomplete="off" class="layui-input">
									</div>
									<div class="layui-input-block">
										<button id="submit" class="layui-btn" lay-submit="" lay-filter="demo1"><i class="layui-icon">&#x1005;</i>确认收款</button>
									</div>
								</div>
							</blockquote>
							[/#if] [#if b.sumbitState != 1]
							<blockquote class="layui-elem-quote layui-quote-nm">
								<div class="layui-upload" style="height: 130px;margin-top: 20px;">
									<a type="button" class="layui-btn" style="background-color: #9E9E9E;">凭证上传</a>
									<div class="layui-upload-list" id="demo2"></div>
								</div>
							</blockquote>
							
							<blockquote class="layui-elem-quote layui-quote-nm">
							<div class="layui-form-item">
									<label class="layui-form-label">应交金额</label>
									<div class="layui-input-block">
										<input id="money" type="text" name="title" autocomplete="off" value="" class="layui-input" disabled>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">实交金额</label>
									<div class="layui-input-block">
										<input type="text" name="text" lay-verify="userName" placeholder="" autocomplete="off" class="layui-input">
									</div>
									<div class="layui-input-block">
										<button class="layui-btn" style="background-color: #9E9E9E;"><i class="layui-icon">&#x1005;</i>确认收款</button>
									</div>
								</div>
							</blockquote>	

							[/#if]

						</form>
					</div>
				</li>
				[/#list]
					
				</ul>
			</div>
			<a href="javascript:;" class="prev btn">
				<</a>
					<a href="javascript:;" class="next btn add_next">></a>
		</div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			<legend>历史还款</legend>
		</fieldset>
		<ul class="layui-timeline" style="margin: 10px 10px 0 10px;">
		[#list list1 as l]
			<li class="layui-timeline-item">
				<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
				<div class="layui-timeline-content layui-text">
					<h3 class="layui-timeline-title">${l.at}</h3>
					<ul>
						<li>应还款金额：${l.shouldMoney}元，实际还款金额：${l.acyualMoney}元</li>
						<li>逾期：${l.overDay}天</li>
						<li>操作人：${l.userName}</li>
						<li>凭证：
							<div class="example" style="height:100px;back-ground:#f00; z-index: 99;">
								[#if l.photo == null][/#if]
								[#if l.photo1 == null][/#if]
								[#if l.photo2 == null][/#if]
								[#if l.photo != null]<img src="${BASE_PATH}/${l.photo}" class="layui-upload-img">[/#if]
								[#if l.photo1 != null]<img src="${BASE_PATH}/${l.photo1}" class="layui-upload-img">[/#if]
								[#if l.photo2 != null]<img src="${BASE_PATH}/${l.photo2}" class="layui-upload-img">[/#if]
							</div>
						</li>
					</ul>
				</div>
			</li>
			[/#list]
		</ul>
	</body>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="user_info">选择</a>
	</script>
	<script src="${BASE_PATH}/static/lib/layui/layui.js"></script>
	<script type="text/javascript" src="${BASE_PATH}/static/js/jquery-3.1.1.min.js"></script>
	<script>
		layui.use(['form', 'layedit', 'laydate', 'jquery', 'table', 'upload'], function() {
			var form = layui.form,
				layer = layui.layer;
			var $ = layui.jquery;
			var table = layui.table;
			var laydate = layui.laydate;
			var upload = layui.upload;

			laydate.render({
				elem: '#test19'
			});
			

			//逾期天数失焦
			$("#day").on("blur", function() {
				var yhUserId = $("#yhUserId").val();
				var day = $("#day").val();
				var m = $("#m").val();
				$.ajax({
					type: 'POST',
					url: '${BASE_PATH}/admin/user/ajax_user_over_day',
					data: {
						tyUserId: yhUserId,
						day: day
					},
					success: function(res) {
						if(res.success == true) {
							//alert(res.msg)
							//console.dir(res.t.dayMoney)
							$("#dayMoney").val(res.t.dayMoney);
							var sum = parseFloat(res.t.dayMoney) + parseFloat(m);
							$("#money").val(sum)
						}
					}
				})
			});

			//多图片上传
			upload.render({
				elem: '#test2',
				url: '${BASE_PATH}/admin/user/photo.json',
				multiple: false,
				number: 3,
				done: function(res) {
					if(res.success == true) {
						if($("#file").val() == "") {
							$("#file").val(res.t);
							$('#demo2').append('<img src="${BASE_PATH}/' + res.t + '" class="layui-upload-img">');
							console.dir("第一张照片上传成功")
						} else if($("#file1").val() == "") {
							$("#file1").val(res.t);
							$('#demo2').append('<img src="${BASE_PATH}/' + res.t + '" class="layui-upload-img">');
							console.dir("第二张上传成功")
						} else if($("#file2").val() == "") {
							$("#file2").val(res.t);
							$('#demo2').append('<img src="${BASE_PATH}/' + res.t + '" class="layui-upload-img">');
							console.dir("第三张照片上传成功")
						} else {
							layer.msg("对不起，只允许上传三张照片")
						}
					}
				}
			});
			
			var yetList = null;
			console.dir(yetList)
			
			
			
			//监听工具条
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				var layEvent = obj.event;
				var tr = obj.tr;

				if(layEvent === 'user_info') {
					var loanId = data.loanId;
					var tyUserId = data.tyUserId;
					
					$.ajax({
						type:'POST',
						url:'ajax_loan_loanBasic_list',
						data:{
							loanId:loanId,
							yhUserId:tyUserId
						},
						async:false,
						success:function(res){
							if(res.success == true){
								yetList = res.t;
								var p = $(".p").attr("class");
								for(var i = 0; i < yetList.length; i++){
									var veh = yetList[i];
									console.dir(veh.p)
									
								}
							}
						}
					});
					if(yetList == null){
						console.dir("null")
					}else if(yetList != null){
						console.dir("no null")
					}
				} else if(layEvent === 'money') {
					layer.open({
						type: 2,
						content: 'money.htm?yhUserId=' + data.yhUserId,
						area: ['1200px', '800px']
					});
				} else if(layEvent === 'edit') {
					layer.open({
						type: 2,
						content: 'loan.htm?yhUserId=' + data.yhUserId,
						area: ['500px', '700px']
					});
				}
			});

			//监听提交
			form.on('submit(demo1)', function(data) {
				$.ajax({
					type:'POST',
					url:'${BASE_PATH}/admin/user/ajax_update_money',
					data:data.field,
					success:function(res){
						if(res.success == true){
							layer.msg("完成收款")
							location.replace(location.href);
						}
					}
				})
				return false;
			});
		});
	</script>

	<script>
		var $a = $(".buttons a");
		var $s = $(".buttons span");
		var cArr = [
				[#list list as a]
				'${a.p}', [/#list]];
					var index = 0;

					$(".next").click(
						function() {
							previmg();
						}
					)
					$(".prev").click(
						function() {
							nextimg();
						}
					)
					//上一张
					function previmg() {
						cArr.unshift(cArr[${count} - 1]);
						cArr.pop();
						//i是元素的索引，从0开始
						//e为当前处理的元素
						//each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
						$("li").each(function(i, e) {
							$(e).removeClass().addClass(cArr[i]);
						})
						index--;
						if(index < 0) {
							index = ${count} - 1;
						}
						//show();
					}

					//下一张
					function nextimg() {
						cArr.push(cArr[0]);
						console.dir(cArr[0])
						cArr.shift();
						$("li").each(function(i, e) {
							console.dir(i)
							//console.dir(e)
							$(e).removeClass().addClass(cArr[i]);
						})
						index++;
						if(index > 6) {
							index = 0;
						}
						//show();
					}
	</script>
	<script src="${BASE_PATH}/static/js/zoomify.min.js"></script>
	<script type="text/javascript">
		$('.example img').zoomify();
	</script>

</html>